<!-- PREVIEW DATA -->
<link href="__PUBLIC__/vendors/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
<!-- load the JS files in the right order -->
<!-- sortable plugin for sorting/rearranging initial preview -->
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/plugins/sortable.min.js"></script>
<!-- purify plugin for safe rendering HTML content in preview -->
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/plugins/purify.min.js"></script>
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/fileinput.js"></script>
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/zh.js"></script>


<input id="single-uploader-[uploader-name]" name="single-uploader-[uploader-name]" type="file" class="file-loading" multiple accept=".xls,.xlsx">
<input type="hidden" id="[uploader-name]" name="[uploader-name]" value="">

<script>
    //上传处理器
    var input= $("#single-uploader-[uploader-name]");

    //图片管理器
    var image = $("#[uploader-name]");
    input.fileinput({
        language: 'zh',
        uploadUrl: "{:url('Utils/uploadExcel',array('name'=>'single-uploader-[uploader-name]'))}",
        uploadAsync: true, //默认异步上传
        showCaption: true,//是否显示标题
        showUpload: false, //是否显示上传按钮
        showRemove: true,               //是否显示移除按钮
        browseClass: "btn btn-primary", //按钮样式
        allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀
        maxFileCount: 1,//最大上传文件数限制
        previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
        showPreview: true, //是否显示预览
        allowedPreviewTypes: null,
        maxFileSize: 1024,
        layoutTemplates: {actionZoom:"",actionUpload:"",actionDelete:""},
        previewFileIconSettings: {
            'docx': '<i class="fa fa-file-word-o text-primary"></i>',
            'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
            'xls': '<i class="fa fa-file-excel-o text-success"></i>',
            'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
            'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
            'pdf': '<i class="fa fa-file-archive-o text-muted"></i>',
            'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
        },
        uploadExtraData: function () {
            var extraValue = "test";
            return {"excelType": extraValue};
        }
    }).on("filebatchselected", function(event, files) {
        $(".file-preview-success").remove();
        if (files.length > 0)
        {
            //图片选择完成后自动上传
            input.fileinput("upload");
        }
    }).on('fileuploaded', function(event, data, id) {
        if(data.response)
        {
            if (data.response.status == 0)
            {
                //获取图像URL
                var url = data.response.url;

                image.val(url);
            }
        }
    }).on('fileclear', function(event, id) {
        image.val("");
    }).on('filesuccessremove', function(e, id) {
        image.val("");
    }).on('filedeleted', function(e, id) {
        console.log('File uploaded params', id);
        image.val("");
    });

</script>